<template>
  <div class="message">
      <div class="message-head">
        <span>消息</span>
        <van-icon name="plus" color="#fff" class="icon"/></div> 
      <van-search v-model="value" placeholder="请输入搜索关键词" @focus="onFocus"/>
      <ul >
        <router-link 
        tag="li" 
        v-for="(item,index) in friendsList" 
        :key="index"
        :to="{name:'Wechat',params:{id:item.id,name:item.name,image:encodeURIComponent(item.url)}}"
        >
        <li class="content" >
          <img :src="item.url" alt="" class="img">
          <div class="name">{{item.name}}</div>
        </li>
        </router-link>
      </ul>
      <router-view/>
  </div>
</template>

<script>
import api from '../../api'
export default {
    name:'message',
    data(){
      return{
        value:'',
        friendsList:[]
      }
    },
    mounted(){
      api.friendsInfo().then(res=>{
        this.friendsList = res.data.list
      })
    },
    methods:{
      onFocus(){
        this.$router.push('/search')
      },
    }
}
</script>

<style scoped lang='less'>
// .message{
//   width:100%;
//   height:100%;
//   background-color: #f5f5f5;
// }
.message-head{
  width:100%;
  height: 1.3rem;
  background-color: #4e90ff;
  text-align: center;
  line-height: 1.3rem;
  color:#fff;
  font-size: 22px;
  position: relative;
  .icon{
    position: absolute;
    right:0.15rem;
    top: 0.4rem;
  }
}
.content{
  width:100%;
  position: relative;
  height:1.3rem;
  line-height: 1.3rem;
  border-bottom:0.5px solid  rgb(187, 184, 184);
  .img{
    padding-left: 0.2rem;
    padding-top:0.1rem;
    width:1.1rem;
    height:1.1rem;
    border-radius: 50%;
    float: left;
  }
  .name{
    float: left;
    margin-left: 10px;
    font-size:18px;
  }
}
// .content::after{
//   content: '';
//   display: block;
//   position: absolute;
//   height:1px;
//   left:-50%;
//   width:200%;
//   transform: scale(0.5);
//   background-color: rgb(187, 184, 184);
// }
</style>